Riotでカスタムタグの中にロジックを書いてみる

#JavaScript

梶原裕

2018.03.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

好物はインフラとフロントエンドのかじわらゆたかです。前回ではRiotのカスタムタグを紹介しました。

ですが、内容としてはHTMLをまとめただけでしたので、今回はカスタムタグの中にJavascriptでロジックを書いてみます。

カスタムタグの分割

前回はhtmlファイル内でカスタムタグも書いていましたが、Riotではカスタムタグ毎にファイルを分割することが可能です。
今回は分割したカスタムタグ内にロジックを記載し、そのタグを参照してみたいと思います。

カスタムタグの実装

<my-tag>
    <h3>Hello Classmethod.</h3>
    <p>{message}</p>
    <script>
        const tag = this
        const date = new Date()
        tag.message = "today is " + date
        tag.update()
    </script>
</my-tag>

カスタムタグを実装する場合は、実装したいタグで囲んで中にHTMLとロジックのJavascriptを記載していきます。

タグインスタンス

カスタムタグにはタグインスタンスが割り当てられます。
これはscript内のthisで参照できるのですが、コールバックの処理の中からタグインスタンスを参照するといった際に、 thisでは参照できないため、何か変数に代入しておきます。この例では、Riotjs Style Guideを参考にtagという変数に代入しています。

タグインスタンスの中のプロパティはHTMLからテンプレート変数として参照することが可能です。
今回の作例ではmessageというプロパティにtoday is と取得した現在日時をセットしています。

最後にタグインスタンスをupdate()メソッドを用いて更新を行なっています。

テンプレート変数

HTML内では、括弧{}に囲まれたテンプレート変数を用いることで、タグインスタンスの変数をHTML内に展開することが可能です。今回の作例ではmessageというプロパティをタグインスタンスに設定したので、その値を参照しています。

カスタムタグの参照

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Riot Sample</title>
</head>
<body>
    Hello World
    <my-tag></my-tag>
    <script src="myTag.tag.html" type="riot/tag"></script>
    <script src="https://cdn.jsdelivr.net/npm/riot@3.7/riot+compiler.min.js"></script>
    <script>
        riot.mount('*')
    </script>
</body>
</html>

今回作成したカスタムタグファイルはJavascriptのスクリプトを参照するのと同様scriptタグで参照することが可能です。